//提币
<template>
    <div class="coin-out">
       <div class="deyi">{{this.message}}提币</div>
        <span style="float: right;margin-right:30px;margin-top: -23px;" v-on:click="tanchuan"><img src="../../assets/img/images/guan_bi.png" alt=""></span>
        <!-- 未实名认证 或设置交易密码时 -->
        <!-- <div v-if="userData && userData.status !=2 || !isHavePwd">
           
           
                <div  class="user-card" v-if="userData && userData.status !=2">
                    <div class="user-card-iden">
                        <!- <img src="../../assets/img/user_identification.png" alt=""> ->
                        <div class="user-card-text">
                            <p>{{$t('u_smrz')}}</p>
                            <!- 实名认证通过后可以进行买卖、提币等操作 ->
                            <p>{{$t('u_smrztgh')}}</p>
                        </div>
                        <div class="user-card-state">
                            <!-去认证 ->
                            <p @click="gotoRoute('/user/account/account_msg')">{{$t('u_qrz')}}</p>
                        </div>
                    </div>
                </div>

                <div  class="user-card" v-if="!isHavePwd">
                    <div class="user-card-pay">
                        <!- <img src="../../assets/img/user_password.png" alt=""> ->
                        <div class="user-card-text">
                            <!- 交易密碼 ->
                            <p>{{$t('u_jyma')}}</p>
                            <p>{{$t('u_szjymah')}}</p>
                        </div>
                        <div class="user-card-state">
                            <!- 去设置 ->
                            <p @click="gotoRoute('/user/account/trade_pwd')">{{$t('u_qsz')}}</p>
                        </div>
                    </div> 
                </div>

            
        </div> -->

        <!-- 提币 v-else -->
        <div style="padding:10px 50px">
            <div class="user_coinin_chosen" v-if="coinList" style="background: #ffff;border: 0;">      
                    <!-- <b-row>
                        <!- 币种选择 ->
                        <b-col lg="12" class="coinin_chosen">
                            <span>{{$t('u_bzxz')}}：{{this.message}}</span>
                            <!- <ul>
                                <li @click="activeChange(index)" :class="{active:isActive == index}" class="chosen-item" v-for="(n,index) in coinList" :key="index">{{n.coinType}}</li>
                            </ul> ->
                        </b-col>
                    </b-row> -->
            <!--表单 -->
                    <div v-if="ifHkt" class="hkt-msg">
                        HKT 提币请加官方客服 best-lxmy7
                    </div>
                    <div v-else>
                        <!-- 提币地址 -->
                        <b-row>
                            <b-col  class="input-item">
                                <div class="item-name">{{$t('u_tbdz')}}</div>
                                <b-input v-model="coinAddress" class="item-val" :placeholder="$t('u_qtxjsdz')"></b-input>
                            </b-col>
                        </b-row>

                        <!-- 转出数额 -->
                        <b-row>
                            <b-col  class="input-item">
                                <div class="item-name">{{$t('u_zcse')}}</div>
                                <b-input v-model="coinVal" class="item-val" :placeholder="$t('u_qtczcse')"></b-input>
                            </b-col>
                        </b-row>
                            <b-row>
                                <b-col  class="balance-text">
                                    <!-- 当前 可用余额 -->
                                    <p style="margin-top: -15px;margin-left: -10px;font-family: PingFangSC-Medium;font-size: 14px;color: #99A7C8;letter-spacing: 0;">{{$t('u_dq')}}{{coinList[isActive].coinType}}{{$t('u_kyye')}}：
                                    <b style="color:#1ec167;font-family: PingFangSC-Medium;font-size: 14px;color: #1F3F87;letter-spacing: 0;">{{(coinList[isActive].value*1)._toFixed(8)}}</b>
                                    <span  @click="yue()" style="cursor:pointer;color: #1F3F87;float: right;  margin-right: -8px;">{{$t('quanbutibi')}}</span>
                                    </p>
                                </b-col>
                                <!--<b-col lg="6" md="6" class="balance-text">
                                    当前 冻结余额 
                                    <p>{{$t('u_dq')}}{{coinList[isActive].coinType}}{{$t('u_djye')}}：
                                        <b style="color:#fd4041">{{(coinList[isActive].lockValue*1)._toFixed(8)}}</b>
                                    </p>
                                </b-col>-->
                            </b-row>

                        <!-- 图形验证码
                        <b-row>
                            <b-col lg="5" md="5" sm="6" class="input-item">
                                <div class="item-name">{{$t('u_txyzm')}}</div>
                                <b-input class="item-val" :placeholder="$t('u_qsltxyzm')"></b-input>
                                <div class="img-code">
                                    <img src="../../assets/img/pic.jpg" alt="">
                                </div>
                            </b-col>
                        </b-row> 
                        --> 
                    </div>

                <!-- 短信验证码 -->
                <b-row>
                    <b-col  class="input-item">
                        <div class="item-name">{{$t('u_yzm')}}</div>
                        <div class="ddddd" style="display: flex;border: 1px solid #99A7C8;border-radius: 4px;">
                        <b-input v-model="mgsCode" class="item-val" :placeholder="$t('u_qslyzm')"></b-input>
                        <button :disabled="ifDisabled" @click="currenGetPhoneCode" class="phone-code" variant="outline-secondary">{{btnText}}</button>
                        </div>
                    </b-col>
                </b-row>

                <!-- 备注 EOS  XRP需要备注 -->
                <b-row v-if="this.message == 'EOS'">
                    <b-col class="input-item">
                        <div class="item-name">{{$t('u_zcbz')}}</div>
                        <b-input v-model="remark" class="item-val" :placeholder="$t('u_qsrbz')"></b-input>
                    </b-col>
                </b-row>
                <b-row v-if="this.message == 'XRP'">
                    <b-col  class="input-item">
                        <div class="item-name">{{$t('u_zcbz')}}</div>
                        <b-input v-model="remark" class="item-val" :placeholder="$t('u_qsrbz')"></b-input>
                    </b-col>
                </b-row>
               

                <b-row>
                    <b-col  class="input-item">
                        <!-- <div class="item-name"></div> -->
                        <button :disabled="once" @click="saveCoinWithdraw" class="submit-btn" variant="success">{{$t('u_tb')}}</button>
                    </b-col>
                </b-row>

                <b-row>
                    <b-col class="coin-out-tips-text" v-if="coinList">
                        <p>{{$t('t_tishi_1')}}</p>
                        <p>1. {{$t('b_dbzxtbslw1')}}{{minCoin}}{{coinList[isActive].coinType}}, {{$t('b_dbzxtbslw2')}}{{maxCoin}}{{coinList[isActive].coinType}},{{$t('b_dbzxtbslw3')}}{{maxCoin}}{{coinList[isActive].coinType}}</p>
                        <p>2. {{$t('b_tishi1')}}</p>
                        <p>3. {{$t('b_tishi2')}}</p> 
                    </b-col>
                </b-row>

            </div> 
        </div>
            <!-- 交易记录表格 -->
                <!-- <b-table responsive="md" hover :fields="fields" :items="items">
                    <template slot="txid" scope="data">
                        <p style="max-width:200px">{{data.item.txid}}</p> 
                        <div v-if="data.item.status !=2" @click="showTxid(data.item.txid)" class="txid-btn">txid</div>
                    </template>
                    <template slot="address" scope="data">
                        <p>{{data.item.address}}</p>
                    </template>
                    <template slot="createTm" scope="data">
                        <span>{{getLocalTime(data.item.createTm)}}</span>
                    </template>
                    <template slot="status" scope="data">
                        <span :style="{color:transformStatus(data.item.status).color}">{{transformStatus(data.item.status).text}}</span>
                    </template>
                </b-table> 
                <div class="page-pagination">
                    <b-pagination align="right" :total-rows="total" v-model="currentPage" :per-page="10">
                    </b-pagination>
            </div>-->
        

    </div>
</template>

<script>
import { mapActions } from "vuex";
import { getLocalTime } from "../../assets/js/common";
import mixins from '../../assets/js/mixin'
export default {
    props:{
    message: String
     },
    mixins: [mixins],
    data() {
        return {
            msg: "提币",
            fields: [
                { key: 'createTm', label: this.$t('u_zcsj') },
                { key: 'address', label: this.$t('u_jsdz') },
                { key: 'value', label: this.$t('u_sl') },
                { key: 'status', label: this.$t('u_zt') },
                { key: 'remark', label: this.$t('u_beiz') },
                { key: 'txid', label: this.$t('u_jlid') },
            ],
            items: [],
            shue:'',
            userData: null,
            isHavePwd: true,

            ifDisabled: false,
            btnText: this.$t('u_hqyzm'),
            timer: null,
            phone: "",

            isActive: 0,
            coinList: null,

            coinVal: "",
            coinType: "",
            coinAddress: "",
            remark: "",
            passWorde: "",
            mgsCode: "",
            once: false,

            currentPage: 1,
            total: 1,
            page: 1,

            minCoin: 0,
            maxCoin: 0,
            coinFee: 0,

            coinType_query: "",

            onceFlag: true,

            ifHkt: true

        };
    },
    methods: {
             tanchuan(){
          this.$emit('child-say')
      },
        getLocalTime,
        init() {
            this.coinVal = "";
            this.coinType = "";
            this.coinAddress = "";
            this.remark = "";
            this.passWorde = "";
            this.mgsCode = "";
        },
    yue(){
     this.coinVal  = (this.coinList[this.isActive].value*1)._toFixed(8)

    },
        activeChange(i) {
            this.isActive = i;
            this.getCoinConfig(this.coinList[this.isActive].coinType);
            this.getUserCoinRecord();
            if (i == 0) {
                this.ifHkt = true
            } else {
                this.ifHkt = false
            }
        },
        currenGetPhoneCode() {
            this.getPhoneCode(this.phone).then(res => {
                if (res.data.code == '001') {
                    this.countdown();
                }
            });

        
        },
        getUserCoinInfoList() {
            this.ifLoadingChange(true)
            this.$http.get("/nb-web/api/coin/user/list").then(res => {
                if (res.data.code == '001') {
                    this.coinList = this.filterCoinList(res.data.result.list);
                    if(this.coinType_query){
                      if(this.coinType_query == "HKT"){
                        this.ifHkt=true
                      }else{
                        this.ifHkt = false;
                      }
                    }else{
                      if(this.coinList[0].coinType ==  'HKT'){
                        this.ifHkt=true
                      }else{
                        this.ifHkt = false;
                      }
                    }
                    if (this.onceFlag) {
                        // 第一次调用请求从地址栏参数获取index
                        this.isActive = this.getIndex(this.coinList);
                        this.onceFlag = false;
                    }
                    if (this.coinList && this.coinList.length > 0) {
                        this.getCoinConfig(this.coinList[this.isActive].coinType);
                        this.getUserCoinRecord();
                    }
                }
            })
        },
        testing() {

            
            if (this.coinAddress == '') {
                // 转出地址不能为空
                this.$swal(this.$t('u_zcdzbnwk'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            if (this.coinVal == '') {
                // 转出数额不能为空
                this.$swal(this.$t('u_zcsebnwk'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            if (this.coinVal < this.coinFee) {
                // 转出数额不能低于手续费
                this.$swal(this.$t('u_tbsldysxf'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            if (this.mgsCode == '') {
                // 短信验证码不能为空
                this.$swal(this.$t('u_yzmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            return true;
        },
        saveCoinWithdraw() {
            //提币申请
            if (!this.testing()) {
                return false;
            }
            this.once = true;
            this.ifLoadingChange(true)
            this.coinType = this.coinList[this.isActive].coinType;
            this.getPublicKey().then(key => {
                let encrypt = this.$JSEncrypt;
                encrypt.setPublicKey(key);
                this.$http.post('/nb-web/api/withdraw/add', {
                    value: this.coinVal,
                    coinType: this.coinType,
                    address: this.coinAddress,
                    remark: this.remark,
                    mgsCode: this.mgsCode,
                }).then(res => {
                    this.once = false;
                    if (res.data.code == '001') {
                        this.$swal(res.data.msg,{
					icon:'/static/img/dagou.png'
				    });
                        this.init();
                        this.getUserCoinInfoList();
                        this.getUserCoinRecord();
                        this.tanchuan()
                    } else {
                        this.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				})
                    }
                })
            })
        },
        getUserCoinRecord() {
            this.$http.get('/nb-web/api/coin/user/record/list', {
                params: {
                    index: this.page,
                    rows: 10,
                    opType: 2,
                    coinType: this.coinList[this.isActive].coinType
                }
            }).then(res => {
                if (res.data.code == '001') {
                    this.total = res.data.result.total || 1;
                    this.items = res.data.result.data;
                }
            })
        },
        transformStatus(val) {
            var val = val.toString();
            switch (val) {
                case '0':
                    return {
                        text: this.$t('querenz'),
                        color: "orange"
                    }
                    break;
                case '1':
                    return {
                        text: this.$t('chenggong'),
                        color: 'green'
                    }
                    break;
                case '2':
                    return {
                        text: this.$t('shibai'),
                        color: 'red'
                    }
                    break;
                default:
                    return val;
                    break;
            }
        },
        getCoinConfig(coinType) {
            this.$http.get('/nb-web/api/withdraw/config/list', {
                params: {
                    coinType
                }
            }).then(res => {
                if (res.data.code == '001') {
                    this.minCoin = res.data.result.withdrawMinValue;
                    this.maxCoin = res.data.result.withdrawMaxValue;
                    this.coinFee = res.data.result.withdrawFeeValue;
                }
            })
        },
        getIndex(data) {
            let index = 0;
            for (let i in data) {
                if (this.coinType_query == data[i].coinType) {
                    index = i;
                }
            }
            return index || 0;
        },
        showTxid(id) {
            this.$swal(id,{
					icon:'/static/img/tan_chuang.png'
				});
        },
        filterCoinList(data) {
            console.log(data)
            let newData = [];
            for (const i in data) {
                if (data[i].operateStatus == '1' || data[i].operateStatus == '3') {
                    newData.push({
                        coinList: data[i].coinList,
                        coinName: data[i].coinName,
                        coinType: data[i].coinType,
                        isTrade: data[i].isTrade,
                        lockValue: data[i].lockValue,
                        lockValue: data[i].lockValue,
                        operateStatus: data[i].operateStatus,
                        status: data[i].status,
                        userId: data[i].userId,
                        userName: data[i].userName,
                        value: data[i].value,
                        value: data[i].value,
                        version: data[i].version
                    });
                }
            }
            if (newData.length <= 0) {
                return null;
            }
            return newData;
        },
        ...mapActions(['coinTabActiveChange', 'ifLoadingChange']),
        //  ...mapState(["isBindPhone" ])
    },
    created() {
        // this.exists(); //验证是否绑定手机
        // this.coinType_query = this.$route.query.coinType || "";
        this.coinType_query = this.message || "";
        this.coinTabActiveChange(1);
        this.phone = this.$cookie.getCookie('account');
        this.getUserCoinInfoList();
        if(this.coinType_query == "HKT"){
          this.ifHkt = true;
        }else{
          this.ifHkt = false;
        }
        //   this.getUserCoinRecord();
    },
    watch: {
        currentPage(newval) {
            this.page = newval;
            this.getUserCoinRecord();
        },
        coinVal(){
            this.shue =  (this.coinVal -this.coinFee).toFixed(4)
        }
    }
};
</script>



<style lang="scss" scoped>
.deyi{
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #1F3F87;
    letter-spacing: 0;
    margin-left: 45px;
    padding-top: 44px;
}
.table-hover thead tr th{
    border-top:0;
    border-bottom:1px solid rgba(153,167,200,0.2);
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #99A7C8;
    letter-spacing: 0;
    text-align: left;
}
.hkt-msg {
  font-size: 18px;
  color: #666;
  margin-top: 20px;
  margin-bottom: 50px;
}
.coin-out {
    width: 588px;
    // height: 850px;
    margin: 30px auto 30px;
    background: #FFFFFF;
    border-radius: 6px;
    .input-item{
        padding:0 10px!important;
    }
  table {
    thead {
      tr th {
        font-weight: normal;
        &:nth-child(1) {
          min-width: 180px;
        }
        &:nth-child(2) {
          min-width: 170px;
        }
        &:nth-child(3) {
          min-width: 100px;
        }
        &:nth-child(4) {
          min-width: 100px;
        }
        &:nth-child(5) {
          min-width: 100px;
        }
        &:nth-child(6) {
          min-width: 100px;
        }
        &:nth-child(7) {
          min-width: 120px;
        }
        &:nth-child(8) {
          min-width: 100px;
        }
        &:nth-child(9) {
          min-width: 80px;
        }
      }
    }
    tbody {
      tr td {
        padding: 0.35rem 0.75rem;
        font-size: 14px;
        line-height: 30px;
        p {
          // word-break:break-all
        }
      }
    }
  }
 
  .user-card {
      margin-top:30px;
    > div {
      height: 86px;
      padding: 13px 0 13px 10px;
      margin-bottom: 8px;
      position: relative;
    }
    img {
      width: 60px;
      height: 60px;
      float: left;
    }
    .user-card-text {
      float: left;
      margin-left: 15px;
      p:nth-child(1) {
        line-height: 32px;
        color: #333;
        font-size: 16px;
      }
      p:nth-child(2) {
        line-height: 29px;
        color: #999;
        font-size: 12px;
      }
    }
    .user-card-state {
      position: absolute;
      top: 0;
      right: 0;
      padding-right: 25px;
      p {
        color: #315dcf;
        line-height: 86px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
  .user-card-phone {
    background-color: #eaffe0;
  }
  .user-card-iden {
    // background-color: #ffefef;
  }
  .user-card-login {
    background-color: #d6f4fe;
  }
  .user-card-pay {
    // background-color: #f3f2ff;
  }

  //提币
  .user_coinin_chosen {
    
    
    
  }
  .ddddd{
    display: flex;
    border: 1px solid rgb(153, 167, 200);
    border-radius: 4px;
    input{
        border:none;
    }
    button{
        border: none;
        cursor: pointer;
    height: 26px;
    /* line-height: 32px; */
    margin-top: 3px;
    background: transparent;
    border-left: 1px solid #99A7C8;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    letter-spacing: 0;
    }
  }
  .coinin_chosen {
    padding: 0 10px;
    display: flex;
    span {
      width: 200px;
      line-height: 24px;
      font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    }
    ul {
      flex: 1;
    }
    li {
      font-size: 14px;
      line-height: 24px;
      color: #333333;
      float: left;
    }
    .chosen-item {
      margin: 0 10px;
      padding: 0 10px;
      cursor: pointer;
      list-style: none;
      &:hover,
      &.active {
        color: #fff;
        background: #2d6df0;
        border-radius: 2px;
      }
    }
  }
  .qrcode {
    img {
      display: block;
      margin: 0 auto;
      width: 160px;
    }
  }
  .pay-address {
    p {
      margin-top: 23px;
      line-height: 24px;
      margin-bottom: 30px;
      font-size: 14px;
      color: #333;
      width: 100%;
      text-align: center;
    }
    .pay-address-btn {
      width: 161px;
      height: 45px;
      text-align: center;
      line-height: 45px;
      background: #2d6df0;
      color: #fff;
      font-size: 16px;
      border-radius: 20px;
      margin: 0 auto;
    }
  }
  .chosen-line {
    width: 100%;
    height: 30px;
    border-bottom: 1px dashed #d2d2d2;
  }
  .chosen-tips-text {
    padding: 15px 15px;
    p {
      font-size: 12px;
      color: #999;
    }
  }

  .balance-text {
    font-size: 14px;
    color: #333333;
    margin-top:20px;
    padding: 2px 20px;
    b {
      font-size: 24px;
    }
  }

  // 表单
  .input-item {
    display: flex;
    padding: 10px;
    font-size: 14px;
        flex-direction: column;
    .item-name {
      width: 80px;
      margin-right: 10px;
      line-height: 30px;
      font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    letter-spacing: 0;
    text-align: left;
    }
    .item-state {
      line-height: 38px;
      text-align: left;
    }
    .item-val {
      flex: 1;
      font-size: 14px;
      outline: none;
      box-shadow:none;
    }
  }
  .submit-btn {
    width: 276px;
    height: 50px;
    background-image: linear-gradient(-90deg, #6CA5FF 1%, #5291FF 96%);
    border-radius: 10px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    border:none;
    margin: 15px auto;
  }

  .img-code {
    margin-left: 5px;
    height: 100%;
    width: 106px;
    border: 1px solid #868e96;
    border-radius: 0.25rem;
    img {
      display: block;
      width: 104px;
      height: 36px;
    }
  }
  .phone-code {
    margin-left: 5px;

  }

  .coin-out-tips-text {
    // margin-top: 10px;
    // margin-bottom: 40px;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #99A7C8;
    letter-spacing: 0;
    p {
      font-size: 12px;
      line-height: 18px;
      color: #999999;
    }
  }
  .txid-btn {
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 4px;
    background-color: #2d6df0;
    color: #ffffff;
    cursor: pointer;
  }
}
.form-control{
    padding:0.35rem 0.75rem!important
}
</style>
